<template>
    <div class="welcome-container">
        <!-- 第一行 -->
        <div class="row1" v-if="Object.keys(this.welcomeInfo).length>0">
            <div class="row11">
                <div class="title">
                    有效期: {{welcomeInfo.plusmember.value}}
                    <img src="../../src/assets/img/welcome/orangePlusRight.png" alt="">
                </div>
                <div class="img test">
                    <img src="../../src/assets/img/welcome/orangePlus.png" alt="">
                </div>
                <div class="plus-btn btn">{{welcomeInfo.plusmember.title}}</div>
                <div class="ins">{{welcomeInfo.plusmember.desc}}</div>
            </div>
            <div class="row12">
                <div class="title">
                    {{welcomeInfo.domainname.value}}
                    <img src="../../src/assets/img/welcome/blueIeRight.png" alt="">
                </div>
                <div class="img">
                    <img src="../../src/assets/img/welcome/blueIe.png" alt="">
                </div>
                <div class="blue-btn btn">{{welcomeInfo.domainname.title}}</div>
                <div class="ins">{{welcomeInfo.domainname.desc}}</div>
            </div>
            <div class="row13">
                <div class="title">
                    {{welcomeInfo.largeclass.value}}
                    <img src="../../src/assets/img/welcome/greenClassRight.png" alt="">
                </div>
                <div class="img">
                    <img src="../../src/assets/img/welcome/greenClass.png" alt="">
                </div>
                <div class="green-btn btn">{{welcomeInfo.largeclass.title}}</div>
                <div class="ins">{{welcomeInfo.largeclass.desc}}</div>
            </div>
        </div>
        <div class="row2" v-if="Object.keys(this.welcomeInfo).length>0">
            <div class="row21">
                <div class="title">
                    剩余：{{welcomeInfo.privateclass.value}}
                    <img src="../../src/assets/img/welcome/redShowRight.png" alt="">
                </div>
                <div class="img">
                    <img src="../../src/assets/img/welcome/redShow.png" alt="">
                </div>
                <div class="red-btn btn">{{welcomeInfo.privateclass.title}}</div>
                <div class="ins">{{welcomeInfo.privateclass.desc}}</div>
            </div>
            <div class="row22">
                <div class="title">
                    剩余：{{welcomeInfo.vodcache.value}}
                    <img src="../../src/assets/img/welcome/orangeRedisRight.png" alt="">
                </div>
                <div class="img">
                    <img src="../../src/assets/img/welcome/orangeRedis.png" alt="">
                </div>
                <div class="plus-btn btn">{{welcomeInfo.vodcache.title}}</div>
                <div class="ins">{{welcomeInfo.vodcache.desc}}</div>
            </div>
            <div class="row23">
                <div class="title">
                    剩余：{{welcomeInfo.vodflow.value}}
                    <img src="../../src/assets/img/welcome/blueFlowRight.png" alt="">
                </div>
                <div class="img">
                    <img src="../../src/assets/img/welcome/blueFlow.png" alt="">
                </div>
                <div class="blue-btn btn">{{welcomeInfo.vodflow.title}}</div>
                <div class="ins">{{welcomeInfo.vodflow.desc}}</div>
            </div>
        </div>

    </div>
</template>

<script>;
export default {
    name: 'Welcome',
    data() {
        return {
        }
    },
    props: {
        welcomeInfo: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
    }
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');

    .welcome-container {
        .row1,
        .row2 {
            .flex(row, space-between, center, nowrap);

            >div {
                text-align: center;
                width: 33.333%;
                margin-right: 20px;
                background: #ffffff;
                margin-top: 20px;
                height: 310px;
                position: relative;
                box-shadow: 0px 0px 0px 0px rgba(119, 151, 178, 0.16);
                .title img {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    width: 128px;
                    height: 132px;
                }

                &:last-child {
                    margin-right: 0px;
                }
            }
            .row11, .row12, .row13, .row21, .row22, .row23{
                box-shadow: 0px 2px 3px 0px rgba(119,151,178,0.16)
            }
            .ins {
                margin-top: 26px;
                width: 300px;
                margin: auto;
                margin-top: 20px;
            }
        }

        .title {
            height: 56px;
            line-height: 56px;
            text-align: left;
            padding-left: 26px;
        }

        .img {
            text-align: center;

            img {
                height: 140px;
            }

        }

        .btn {
            height: 34px;
            line-height: 34px;
            border-radius: 4px;
            margin: auto;
        }

        .plus-btn {
            width: 154px;
            background: rgba(250, 167, 68, 0.061799999999999994);
            color: #F9A03B;
        }

        .blue-btn {
            width: 184px;
            background: rgba(40, 136, 250, 0.0962);
            color: #2887FA
        }

        .green-btn {
            width: 154px;
            background: rgba(10, 196, 154, 0.061799999999999994);
            color: #0AC49A;
        }

        .red-btn {
            width: 154px;
            background: rgba(230, 68, 64, 0.061799999999999994);
            color: #E64641;
        }

    }

</style>
